<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../css/reset.css">
		<style>
			body {
				background-color: #f4f4f4;
			}
			.w {
				width: 1226px;
				margin: 0 auto;
			}

			.goodsList li {
				width: 230px;
				float: left;
				padding: 5px;
				box-sizing: border-box;
				background-color: #fff;
				margin-bottom: 10px;
				margin-right: 10px;
			}

			.goodsList li img {
				width: 80%;
				
				display: block;
				margin: 0 auto;
			}

			.title {
				min-height: 38.4px;
				font-size: 14px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.price {
				line-height: 32px;
				font-size: 14px;
				color: #e33333;
			}
		</style>
	</head>
	<body>
		<ul class="goodsList w cl">
			<!-- <li>
		        <a href="">
		            <img src="https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/201204/13/5704/79299/613748c7E58f768df/918ac8921e3bdfe9.jpg.webp"
		                alt="">
		            <div class="title">一加 OnePlus 9R 5G 120Hz 柔性屏12GB+256GB 黑岛 骁龙870 65W快充 专业游戏配置 超大广角拍照手机</div>
		            <div class="price">￥ 3199.00 </div>
		        </a>
		    </li> -->
		</ul>
	</body>
	<script type="text/javascript">
		var ul = document.getElementsByClassName("goodsList")[0];
		// 参数:
		// page: 页码
		// pagesize: 页面多少条
		// callback: 自定义接口返回的回调函数名

		// 数据
		// var result = {
		// 	success:true,
		// 	data: [{
		// 		target_url: 跳转地址,
		// 		t:商品描述,
		// 		op: 现价,
		// 		jp: 原价,
		// 		img:"https://img10.360buyimg.com/jdcms/s300x300_" + img
		// 	}, {

		// 	}],

		function fn (result) {
			var {data: list} = result;
			console.log(list);
			var html = "";
			var obj = list.values();
			for (var goods of obj) {
				// console.log(goods);
				var {t,op,jp,img,target_url} = goods;
				html += `<li>
			            <a href="${target_url}">
			                <img src="https://img10.360buyimg.com/jdcms/s300x300_${img}"
			                    alt="">
			                <div class="title">${t}</div>
			                <div class="price">￥ ${jp} </div>
			            </a>
			            </li>`;
			}
			ul.innerHTML = html;
		}
	</script>

	<script
		src="https://floor.jd.com/user-v20/feed/get?page=2&pagesize=50&area=17_2980_0_0&source=pc-home&callback=fn&_=1631783153933"
		type="text/javascript" charset="utf-8"></script>
</html>
